<template>
	<view class="home-container">
		<!-- 导航栏 -->
		<NavBar></NavBar>
		
		<!-- 选项卡 -->
		<TabBar
			@changeActiveIndex="changeActiveIndex"
			:labelList="tabbarOption.list"
			:activeIndex="tabbarOption.activeIndex"
		></TabBar>
		<!-- 文章组件 -->
		<ArticleList
			class="list-container"
			@changeActiveIndex="changeActiveIndex"
			:labelList="tabbarOption.list"
			:activeIndex="tabbarOption.activeIndex"
		>
		</ArticleList>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				tabbarOption: {
					activeIndex: 0,
					list: []
				}
			}
		},
		
		methods: {
			async getTabbarList() {
				const res = await this.$http.home.getList();
				this.tabbarOption.list = [{ name: "全部" }, ...res];
			},
			changeActiveIndex(newIndex) {
				this.tabbarOption.activeIndex = newIndex;
			}
		},
		
		mounted() {
			this.getTabbarList();
		}
	}
</script>

<style scoped lang="scss">
	
	.home-container {
		flex: 1;
		overflow: hidden;
		box-sizing: border-box;
		@include flex(flex-start, column);
		align-items: inherit;
	}
	
	.list-container {
		// height: 100% !important;
		flex: 1;
		box-sizing: border-box;
	}
</style>